<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>jqMobi Kitchen Sink</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">


<link rel="stylesheet" type="text/css" href="../kitchensink/icons.css" /> 


<link rel="stylesheet"  type="text/css" href="../kitchensink/jq.ui.synergy.css" title="frosty"/>


<script type="text/javascript" charset="utf-8" src="../jq.mobi.js"></script> 


<script type="text/javascript" charset="utf-8" src="../ui/jq.ui.js"></script> 

<script type="text/javascript">
    /* This function runs once the page is loaded, but appMobi is not yet active */
	var webRoot="./kitchensink/";
	$.ui.autoLaunch=false;
    $.ui.openLinksNewTab=false;
    var init = function(){
	   $.ui.backButtonText="Back";  
	   window.setTimeout(function(){$.ui.launch();},1000);
       //$.ui.removeFooterMenu(); This would remove the bottom nav menu
    };
    document.addEventListener("DOMContentLoaded",init,false);  
	$.ui.ready(function(){console.log('ready');});
   
    /* This code prevents users from dragging the page */
    var preventDefaultScroll = function(event) {
        event.preventDefault();
        window.scroll(0,0);
        return false;
    };
	
	document.addEventListener('touchmove', preventDefaultScroll, false);

    /* This code is used to run as soon as appMobi activates */
    var onDeviceReady=function(){
		AppMobi.device.setRotateOrientation("portrait");
        AppMobi.device.setAutoRotate(false);
		webRoot=AppMobi.webRoot+"kitchensink/";
	    //hide splash screen
	    AppMobi.device.hideSplashScreen();	
		
    };
    document.addEventListener("appMobi.device.ready",onDeviceReady,false);    
	function showHide(obj,objToHide){
		var el=$("#"+objToHide)[0];
		
		if(obj.className=="expanded"){
			obj.className="collapsed";
		}
		else{
			obj.className="expanded";
		}
		$(el).toggle();
		
	}
	
</script>

</head>
<body>
<div id="jQUi">
<!-- this is the splashscreen you see. -->
	<!-- ------------------------------------------ -->

	

	<!-- ------------------------------------------ -->

	<!-- ------------------------------------------ -->
	<!-- jqUi -->
	<div title="jqUi" id="jqmui" class="panel"  data-footer='footerui' data-tab="navbar_ui">


	<h2 class='expanded' onclick='showHide(this,"jqui_info");'>jqUi</h2><p id='jqui_info'>jqUi is AppMobi's User Interface/User Experience library for mobile applications. It uses HTML5 and CSS3 for animations and transitions.<br />
	We built the kitchen sink using jqUi.  It is comprised of components from the jqPlugins library and additional features.
	<br>
		* Fixed navigation bar<br>
		* Auto scrolling content panels<br>
		* Optional footer to segment your application<br>
		</p>

	</div>

    </div>



</body>
</html>
